<template>
  <div class="container">
    <div class="note">等待游戏开始</div>
    <div class="flex solid-bottom padding justify-center">
      <div class="padding-sm margin-xs radius">
      <img class="userinfo-avatar" :src="userInfo.avatarUrl" alt="ava">
      </div>
      <div class="padding-sm margin-xs radius">
      <img src="/static/images/vs.png" alt="vs" class="imgSize2">
      </div>
      <div class="padding-sm margin-xs radius">
      <img class="userinfo-avatar" :src="counterInfo.avatarUrl" alt="ava">
      </div>
    </div>
    <div class="btnDiv">
      <button @click="start" class="btnClass">开始游戏</button>
    </div>
    <div class="noteEnd">共7题，每题30秒回答时间</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {},
      counterInfo: {
        nickName: '',
        avatarUrl: ''
      },
      vs_img: '',
      timer: ''
    }
  },
  onLoad: function (options) {
    console.log(options.avatarUrl)
    this.userInfo.nickName = options.nickName
    this.userInfo.avatarUrl = options.avatarUrl
    this.sendMessage()
  },
  beforeMount () {
    this.handleGetUserInfo()
  },
  methods: {
    func () {
      const that = this
      clearInterval(this.timer)
      this.timer = setInterval(function () {
        wx.sendSocketMessage({
          data: JSON.stringify(
            {
              'type': 'match'
            }
          ),
          success: function (e) {
            console.log('发送消息')
          },
          fail: function (e) {
            console.log(e)
          }
        })
        wx.onSocketMessage(function (res) {
          console.log(res)
          if (res !== null) {
            clearInterval(that.timer)
            var json = JSON.parse(res.data)
            that.counterInfo.avatarUrl = json.avatarUrl
          }
        })
      }, 3000)
    },
    sendMessage () {
      wx.sendSocketMessage({
        data: JSON.stringify(
          {
            'type': 'connect',
            'avatarUrl': this.userInfo.avatarUrl
          }
        ),
        success: function (e) {
          console.log('发送消息')
        },
        fail: function (e) {
          console.log(e)
        }
      })
      this.func()
    },
    start () {
      console.log('start game')
      const url = '../battle/main?nickName=' + this.userInfo.nickName + '&avatarUrl=' + this.userInfo.avatarUrl + '&counterUrl=' + this.counterInfo.avatarUrl
      mpvue.navigateTo({url})
    },
    handleGetUserInfo () {
      wx.getUserInfo({
        success: (data) => {
          console.log(data)
          this.userInfo = data.userInfo
          this.isShow = true
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
    getUserInfo (data) {
      console.log(data)
      if (data.mp.detail.rawData) {
        this.handleGetUserInfo()
      }
    },
    setTimer () {
      // this.vs_img = 'transform:scale(1.3)'
      // setTimeout(function () {
      //   this.vs_img = 'transform:scale(1)'
      // }, 500)
    }
  }
}
</script>

<style>
.note {
  color: white;
  text-align: center;
  padding: 50px 0px 30px 0px;
  font: 25px FZYaoti, KaiTi;
  letter-spacing: 3px;
  /* background: linear-gradient(to right, #0081ff, #1cbbb4);  */
} 

.noteEnd {
  color: white;
  text-align: center;
  padding: 50px 0px 0px 0px;
  font-family: FZYaoti, KaiTi;
  font-size: 20px;
}

.imgSize2 {
    width: 65px;
    height: 45px;
    padding: 0px 10px;
}

.btnClass {
  border-radius: 30px;
  box-shadow: 0 9px #999;
  font-family: YouYuan;
}

.btnClass:hover {
  background-color: aliceblue;
}

.btnClass:active {
  background-color: aliceblue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.btnDiv {
  padding: 140px 80px 0px 80px;
}

.divClass{
  width: 230px;
  height: 100px;
  margin:0 auto;
  /* background-color: linear-gradient(right,#0081ff,#1cbbb4); */
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 0rpx;
  border-radius: 50%;
}
</style>
